<template>
  <div>
    <van-nav-bar
      title="聚焦爱尔"
      style="background-color: #36c14c"
    >
    </van-nav-bar>
    <van-image
      width="100%"
      fit="contain"
      :src="require('/public/img/newsList.png')"
    />
    <van-tabs
      v-model="activeName"
      color="#36c14c"
      line-width="60px"
      @click="onClickNewsTab"
    >
      <van-tab title="全部报道" name="0">
        <news-list :newsClass="newsClass"></news-list>
      </van-tab>
      <van-tab title="媒体报道" name="1">
        <news-list :newsClass="newsClass"></news-list>
      </van-tab>
      <van-tab title="社会责任" name="2">
        <news-list :newsClass="newsClass"></news-list>
      </van-tab>
      <van-tab title="学术资讯" name="3">
        <news-list :newsClass="newsClass"></news-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NewsList from "@/components/NewsList.vue";
import { Image as VanImage } from "vant";
export default {
  components: { NewsList },
  data() {
    return {
      activeName: "0",
      newsClass: null,
    };
  },
  methods: {
    onClickNewsTab(name, title) {
      this.newsClass = name;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
}
::v-deep .van-icon {
  color: #fff;
}
</style>
